<template>
  <!--流程业务表单-->
  <div class="form-main">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="请假事由"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input :disabled="disabled"
                   v-decorator="[
            'leaveReason',
            {rules: [{ required: true, message: '请假事由' }]}
          ]"
                   name="leaveReason"
                   placeholder="请输入请假事由" />
        </a-form-item>
        <a-form-item
          label="启始日期"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<!--          <a-range-picker-->
<!--            style="width: 100%"-->
<!--            v-decorator="[-->
<!--            'leaveStartDate',-->
<!--            {rules: [{ required: true, message: '请选择生效日期'}]}-->
<!--          ]" />-->
          <j-date placeholder="请选择开始时间" v-decorator="['leaveStartDate']" :trigger-change="true" style="width: 100%" name="leaveStartDate"/>
        </a-form-item>
        <a-form-item
          label="结束日期"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <!--          <a-range-picker-->
          <!--            style="width: 100%"-->
          <!--            v-decorator="[-->
          <!--            'leaveStartDate',-->
          <!--            {rules: [{ required: true, message: '请选择生效日期'}]}-->
          <!--          ]" />-->
          <j-date placeholder="请选择结束时间" v-decorator="['leaveEndDate']" :trigger-change="true" style="width: 100%" name="leaveEndDate"/>
        </a-form-item>
        <a-form-item label="创建人" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                     :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input v-decorator="['initiateBy']" placeholder="请输入发起人" disabled  name="initiateBy"></a-input>
        </a-form-item>
        <a-form-item v-if="!disabled"
                     :wrapperCol="{ span: 24 }"
                     style="text-align: center"
        >
          <a-button type="primary" :disabled="disabled||btndisabled" @click="handleSubmit">保存</a-button>
          <a-button style="margin-left: 8px" :disabled="disabled" @click="close">取消</a-button>
        </a-form-item>
        <a-form-item v-if="task"
                     :wrapperCol="{ span: 24 }"
                     style="text-align: center"
        >
          <a-button type="primary" @click="passTask">通过</a-button>
          <a-button style="margin-left: 8px" @click="backTask">驳回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import pick from 'lodash.pick'

export default {
  name: 'ActivitiLeaveFormForm',
  props: {
    /*全局禁用，可表示查看*/
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    /*流程数据*/
    processData: {
      type: Object,
      default: () => {
        return {}
      },
      required: false
    },
    /*是否新增*/
    isNew: { type: Boolean, default: false, required: false },
    /*是否处理流程*/
    task: { type: Boolean, default: false, required: false }
  },
  data() {
    return {
      url: {
        getForm:'/actBusiness/getForm',
        addApply:'/actBusiness/add',
        editForm:'/actBusiness/editForm',
        // add: "/form/activitiLeaveForm/add",
        // edit: "/form/activitiLeaveForm/edit",
        // queryById: "/form/activitiLeaveForm/queryById"
      },
      description: '流程表单demo，按例开发表单。需在 activitiMixin.js 中加入写好的表单',
      // form
      form: this.$form.createForm(this),
      /*表单回显数据*/
      data: {},
      btndisabled: false
    }
  },
  created() {
    console.log('流程数据', this.processData)
    if (!this.isNew) {
      this.init()
    }
  },
  methods: {
    /*回显数据*/
    init() {
      this.btndisabled = true
      var r = this.processData
      this.getAction(this.url.getForm, {
        tableId: r.tableId,
        tableName: r.tableName
      }).then((res) => {
        if (res.success) {
          let formData = res.result
          formData.tableName = r.tableName
          this.data = formData
          console.log('表单回显数据', this.data)
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.data
              ,'leaveReason'
              ,'leaveStartDate'
              ,'leaveEndDate'
              ,'initiateBy'))
          })
          this.btndisabled = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("++++++++",this.processData)
          let formData = Object.assign(this.data || {}, values)
          formData.procDefId = this.processData.id
          formData.procDeTitle = this.processData.name
          if (!formData.tableName) formData.tableName = this.processData.businessTable
          formData.filedNames = _.keys(values).join(',')
          console.log('formData', values)

          var url = this.url.addApply
          if (!this.isNew) {
            url = this.url.editForm
          }
          this.btndisabled = true
          this.postFormAction(url, formData).then((res) => {
            if (res.success) {
              this.$message.success('保存成功！')
              //todo 将表单的数据传给父组件
              this.$emit('afterSubmit', formData)
            } else {
              this.$message.error(res.message)
            }
          }).finally(() => {
            this.btndisabled = false
          })
        }
      })
    },
    close() {
      //todo 关闭后的回调
      this.$emit('close')
    },
    /*通过审批*/
    passTask() {
      this.$emit('passTask')
    },
    /*驳回审批*/
    backTask() {
      this.$emit('backTask')
    }
  }
}
</script>
<style lang="less" scoped>
.form-main {
}
</style>